<template>
  <div v-if="detailData.img">
    <!-- <div>详情页面 - {{ $route.params.id }}</div> -->
    <div>详情页面 - {{ id }}</div>
    <div>{{ detailData.nm }}</div>
    <!-- detailData.img在请求成功之前是undefined，请求成功以后才是url -->
    <!-- 请求是异步的 -->
    <img :src="formatUrl(detailData.img)" alt="" />

    <button @click="guess">猜你喜欢</button>
    <button @click="goHome">回到首页</button>
  </div>
  <!-- <div v-else>loading...</div> -->
</template>

<script>
// import { detailApi } from "@/api/api";
import { mapState, mapActions } from "vuex";

export default {
  props: ["id"],
  // computed: mapState(["detailData"]),
  computed: mapState({
    detailData: (state) => state.detail.detailData,
  }),
  // data() {
  //   return {
  //     detailData: {},
  //   };
  // },
  mounted() {
    // this.getData();
    this.asyncGetDetailData({ id: this.id });
  },
  methods: {
    // async getData() {
    //   const res = await detailApi({ id: this.id });
    //   this.detailData = res.result;
    // },
    formatUrl(url) {
      return url.split("/w.h").join("/200.300");
    },
    guess() {
      this.$router.push("/detail/247294");
    },
    goHome() {
      this.$router.push("/home");
    },
    ...mapActions("detail", ["asyncGetDetailData"]),
  },
  // async beforeRouteEnter(to, from, next) {
  //   // 是路由给我们提供的生命周期
  //   // 最早执行的
  //   // 这里面是没有this的
  //   // console.log("beforeRouteEnter", this);

  //   // 在这里去获取数据，获取结束以后再跳转
  //   // 只有调用next方法才能正常进入改页面
  //   const res = await detailApi({ id: to.params.id });
  //   // next可以传入一个函数，函数可以有参数是vm，vm相当于this
  //   next((vm) => {
  //     vm.detailData = res.result;
  //   });
  // },
  // async beforeRouteUpdate(to, from) {
  //   // 也是路由提供的生命周期,不会自动执行的
  //   // 当动态路由的动态参数发生改变的时候会执行

  //   // 相当于之前用的watch: {$route() {}}
  //   console.log("beforeRouteUpdate");
  //   const res = await detailApi({ id: to.params.id });
  //   this.detailData = res.result;
  // },
  // beforeRouteLeave(to, from) {
  //   // 也是路由提供的生命周期，再当要离开该路由的时候调用
  //   // 用于阻止页面的跳转
  //   const answer = window.confirm(
  //     "Do you really want to leave? you have unsaved changes!"
  //   );
  //   if (!answer) return false;
  // },
};
</script>
